<template>
  <div class="card card-flush" :class="className">
    <!--begin::Body-->
    <div
      class="card-body d-flex flex-column justify-content-between bgi-no-repeat bgi-size-cover bgi-position-x-center mt-9 pb-0"
      :style="`background-position: 100% 50%;
          background-image: url('${getAssetPath('media/stock/900x600/42.png')}');`"
    >
      <!--begin::Illustration-->
      <img
        class="h-150px h-lg-200px theme-light-show mx-auto"
        :src="getAssetPath('media/illustrations/misc/upgrade.svg')"
        alt=""
      />
      <img
        class="h-150px h-lg-200px theme-dark-show mx-auto"
        :src="getAssetPath('media/illustrations/misc/upgrade-dark.svg')"
        alt=""
      />
      <!--end::Illustration-->
    </div>
    <!--end::Body-->
  </div>
</template>

<script lang="ts">
import { getAssetPath } from '@/core/helpers/assets';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'DashboardIllustrationWidget',
  components: {},
  props: {
    className: { type: String, required: false, default: '' },
  },
  setup() {
    return {
      getAssetPath,
    };
  },
});
</script>
